<template>
	<a-dropdown trigger="click" class="app-lang">
		<div class="app-lang__caption">
			<span>
				{{ caption }}
				<CaretDownOutlined size="18" />
			</span>
		</div>
		<template #overlay>
			<a-menu @click="selectLang">
				<a-menu-item
					v-for="item in localList"
					:name="item.type"
					:key="item.type"
					>{{ item.name }}
				</a-menu-item>
			</a-menu>
		</template>
	</a-dropdown>
</template>
<script setup lang="ts">
import {
	i18n,
	localList,
	getCurrentLanguage,
	setCurrentLanguage,
} from '@/locales';
import { CaretDownOutlined } from '@ant-design/icons-vue';

const _localList = ref(localList);
const caption = ref('');
/**
 * vue 生命周期
 *
 * @memberof AppLang
 */
onMounted(() => {
	const lang = getCurrentLanguage().locale;
	const local: any = _localList.value.find((_local: any) =>
		Object.is(_local.type, lang)
	);
	caption.value = local.name;
});

/**
 * 选择语言
 *
 * @param {*} data
 * @memberof AppLang
 */
const selectLang = (data: any): void => {
	const local: any = _localList.value.find((_local: any) =>
		Object.is(_local.type, data.key)
	);
	if (local) {
		setCurrentLanguage(local.type);
	}
	window.location.reload();
};
</script>
